<!DOCTYPE html>
<html>
<head>
  <title> </title>
</head>
<body>
<div id="app">
  <slot-test>
    <p>使用插槽分发内容</p>
    <h1 slot="header">插槽测试!</h1>
    <p>在组件中，没有指定插槽名称的元素将被置于默认插槽中</p>
    <p slot="none">指定到不存在的插槽中的内容将不会被显示</p>
  </slot-test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let SlotTest = {
    template: '<div>' +
    '<slot name="header">相当于占位元素，因此这些文字也不会被渲染</slot>' + // 具名插槽
    '<slot></slot>' + // 默认插槽
    '</div>'
  }
  let vm = new Vue({ // Vue实例
    el: '#app',
    components: { SlotTest }
  })
</script>
</body>
</html>